import React, { useContext, useMemo } from 'react'

import TodoItem from './TodoItem'

function TodoContent({datalist,type}){

    // 根据选择全部、完成、未完成实现过滤效果
    const showlist = useMemo(()=>{
        if(type==='done'){
            return datalist.filter(item=>item.done)
        }else if(type==='undone'){
            return datalist.filter(item=>!item.done)
        }else{
            return datalist;
        }

    },[datalist,type])
    return (
        <div>
            <table className="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">待办事项</th>
                        <th scope="col">添加时间</th>
                        <th scope="col">是否完成</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {/* 列表渲染：map */}
                    {showlist.map((item, idx) => {
                        return (
                            <TodoItem data={item} index={idx} key={item.id} />
                        )
                    })}
                </tbody>
            </table>
        </div>
    )
}


export default TodoContent;